<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script> -->

  <script>
    /* 
    then():
      1. 指定回调函数来读取/得到成功/失败的结果数据
      2. 返回一个新的promise => 为了封装then指定的回调函数中的新的任务
        它的结果状态由什么决定?
        由then指定并执行回调函数执行的结果决定
        - 抛出错误 => 失败且reason就是抛出的错误
        - 返回失败的promise => 失败且reason是返回的promise的reason
        - 返回成功的promise => 成功且value是返回的promise的value
        - 返回其它任何值 => 成功且value是返回的值
        - 返回pending的promise => pending的promise

      理解: then为什么要设计返回值为一个新的promise?
          我们可能会在then指定的回调中执行新的任务, 对应的就是返回的新的promise
    */
    new Promise((resolve, reject) => {
      // 执行异步操作, 比如: 发ajax请求
      // 成功后
      // resolve(2)
      // 失败后
      reject(3)
    }).then(
      value => {
        console.log('onResolved', value)
        // 执行下一个任务(同步或异步的)
        return 3
      },
      reason => {
        console.log('onRejected', reason)
        // - 抛出错误 => 失败且reason就是抛出的错误
        // throw 4  // 失败, reason是4
        // - 返回失败的promise => 失败且reason是返回的promise的reason
        // return Promise.reject(5) // 失败, reason是5

        // - 返回成功的promise => 成功且value是返回的promise的value
        // return Promise.resolve(6) // 成功, value是6

        // - 返回其它任何值 => 成功且value是返回的值
        // return 7 // 成功  value 7

        // - 返回pending的promise => pending的promise
        // return new Promise(() => {})
      }
    ).then(
      value => {
        console.log('onResolved2', value)

        // throw 8
        return 8
      },
      reason => {
        console.log('onRejected2', reason)
      }
    ).catch(  // .then(value => value, onRejected)
      reason => {
        console.log('catch onRejected3', reason)
      }
    ).then(
      value => {
        console.log('onResolved4', value)
      },
      reason => {
        console.log('onRejected4', reason)
      }
    ).finally(() => { // 无论promise成功还是失败都会执行
      console.log('onFinally()')
    })
   /* 
   catch的本质是then
   catch(onRejected)
      return .then(value => value, onRejected)
    如果调用.catch的promise是一个成功的, 那catch返回的promise也是成功的, 且value是成功promise的value
   */

    /* 
    Promise.all()
    */
    function ajax(url) {
      return axios.get(url)
    }
    const p1 = ajax(url1)
    const p2 = ajax(url2)
    const p3 = ajax(url3)
    Promise.all([p1, p2, p3])
      .then(
        responses => { // p1, p2, p3成功的response组成的数组
          return ajax(url4)
        }
      ).then(
        response => { // 请求4成功的响应

        }
      ).catch(error => {
        console.log('请求失败了')
      })

  </script>
</body>
</html>